<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import { Card, Row, Col, Spin, Table, Progress } from 'ant-design-vue'
import {
  ClockCircleOutlined,
  CheckCircleOutlined,
  WarningOutlined,
  PercentageOutlined,
  TeamOutlined,
  TrophyOutlined,
  LineChartOutlined
} from '@ant-design/icons-vue'
import { getStudentStatistics } from '@/api/modules/statistics'
import type { StudentStatisticsVO } from '@/types/statistics'
import StatisticCard from './StatisticCard.vue'

const statistics = ref<StudentStatisticsVO>()
const loading = ref(false)

const fetchStatistics = async () => {
  loading.value = true
  try {
    statistics.value = await getStudentStatistics()
  } finally {
    loading.value = false
  }
}

// 修改表格列定义
const columns = [
  {
    title: '任务名称',
    dataIndex: 'taskName',
    key: 'taskName'
  },
  {
    title: '提交时间',
    dataIndex: 'submitTime',
    key: 'submitTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    customRender: ({ text }: { text: string }) => {
      const statusMap = {
        PENDING: { text: '待审核', color: '#faad14' },
        APPROVED: { text: '已通过', color: '#52c41a' },
        REJECTED: { text: '已拒绝', color: '#ff4d4f' }
      }
      const status = statusMap[text as keyof typeof statusMap] || { text, color: '#000' }
      return h('span', { style: { color: status.color } }, status.text)
    }
  },
  {
    title: '审核意见',
    dataIndex: 'comment',
    key: 'comment'
  }
]

onMounted(() => {
  fetchStatistics()
})
</script>

<template>
  <div class="student-dashboard">
    <Spin :spinning="loading">
      <!-- 任务概览卡片 -->
      <Row :gutter="[16, 16]" class="overview-cards">
        <Col :span="6">
          <StatisticCard
            title="进行中任务"
            :value="statistics?.taskOverview.ongoingTasks || 0"
            :icon="ClockCircleOutlined"
            color="#1890ff"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="已完成任务"
            :value="statistics?.taskOverview.completedTasks || 0"
            :icon="CheckCircleOutlined"
            color="#52c41a"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="逾期任务"
            :value="statistics?.taskOverview.overdueTasks || 0"
            :icon="WarningOutlined"
            color="#ff4d4f"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="提交率"
            :value="(statistics?.taskOverview.submitRate || 0) * 100"
            suffix="%"
            :precision="2"
            :icon="LineChartOutlined"
            color="#722ed1"
          />
        </Col>
      </Row>

      <!-- 班级排名和提交历史 -->
      <Row :gutter="[16, 16]" class="mt-4">
        <!-- 班级排名 -->
        <Col :span="8">
          <Card title="班级排名" class="ranking-card">
            <div class="ranking-info">
              <div class="info-item">
                <TeamOutlined class="icon" />
                <span class="label">班级人数：</span>
                <span class="value">{{ statistics?.classRanking.totalStudents }}</span>
              </div>
              <div class="info-item">
                <TrophyOutlined class="icon" />
                <span class="label">当前排名：</span>
                <span class="value">第 {{ statistics?.classRanking.currentRank }} 名</span>
              </div>
              <div class="info-item">
                <div class="progress-label">个人提交率</div>
                <Progress
                  :percent="(statistics?.classRanking.submitRate || 0) * 100"
                  :format="percent => `${percent?.toFixed(2)}%`"
                />
              </div>
              <div class="info-item">
                <div class="progress-label">班级平均提交率</div>
                <Progress
                  :percent="(statistics?.classRanking.classAverageRate || 0) * 100"
                  :format="percent => `${percent?.toFixed(2)}%`"
                  status="normal"
                />
              </div>
            </div>
          </Card>
        </Col>

        <!-- 提交历史 -->
        <Col :span="16">
          <Card title="提交历史">
            <Table
              :columns="columns"
              :data-source="statistics?.submissionHistory"
              :pagination="{ pageSize: 5 }"
              size="small"
            />
          </Card>
        </Col>
      </Row>
    </Spin>
  </div>
</template>

<style lang="less" scoped>
.student-dashboard {
  .overview-cards {
    :deep(.ant-card) {
      background: linear-gradient(135deg, var(--card-bg-color) 0%, var(--card-bg-color-light) 100%);
      
      .ant-card-body {
        color: white;
        
        .ant-statistic-title {
          color: rgba(255, 255, 255, 0.85);
        }
        
        .ant-statistic-content {
          color: white;
        }
      }
    }
  }

  .ranking-card {
    .ranking-info {
      .info-item {
        margin-bottom: 16px;
        
        .icon {
          margin-right: 8px;
          color: #1890ff;
        }
        
        .label {
          color: rgba(0, 0, 0, 0.65);
        }
        
        .value {
          font-weight: 500;
          margin-left: 4px;
        }
        
        .progress-label {
          margin-bottom: 8px;
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }

  :deep(.ant-card) {
    height: 100%;
  }

  .mt-4 {
    margin-top: 16px;
  }
}
</style> 